<?php include("/includes/header.php") ?>
<?php include("/includes/sidebar.php") ?>


<div class="header">
	<!-- <span>
		<a href="report-customer.php">
			<i class="fa fa-folder-open"></i> Customer Transaction
		</a>
	</span> -->
	<!-- <span>
		<a href="report-agent.php">
			<i class="fa fa-group"></i> Agent Transaction
		</a>
	</span> -->
	<span>
		<a href="report-room.php">
			<i class="fa fa-building-o"></i> Room Lease
		</a>
	</span>
	<span>
		<a href="report-restaurant.php">
			<i class="fa fa-cutlery"></i> Food and Beverage Sale
		</a>
	</span>
</div>

<!-- <div class="breadcumb">
	<ul>
		<li>
			<a href="/">
				<i class="fa fa-home"></i> Beranda
			</a>
		</li>
	</ul>
	<div class="clear"></div>
</div> -->

<style type="text/css">
	.tanggal-report {
		cursor: pointer;
	}
</style>

<div class="content row-fluid"> 
	<div class="span12 table-placer report-filter-placer">
		<div class="alert alert-info"><h4>Customer Transaction</h4></div>
		<fieldset class="filter-placer-field">
			<form id="filter-form" class="form-inline">
				<div class="pull-left">
					<select id="filter-type">
						<option value="*">---Choose Date Format---</option>
						<option value="dayviewcustomer" data-format="yyyy-mm-dd" data-min-view="days">Day</option>
						<option value="monthviewcustomer" data-format="yyyy-m" data-min-view="months">Month</option>
						<option value="yearviewcustomer" data-format="yyyy" data-min-view="years">Year</option>
					</select>
				</div>
				<div class="span2">
					<input placeholder="Choose date" type="text" class="tanggal-report span12" id="datepick" name="datepick" readonly="" disabled>
				</div>
				<div class="span2">
					<button type="submit" class="btn btn-primary f2" id="check-filter" disabled>Submit (F2)</button>
				</div>
			</form>
		</fieldset>
		
		<div id="result-content">
			<fieldset class="result-placer-field">
				<ul class="nav nav-tabs" id="tab-view">
				  <li class="active"><a href="#table-view-placer" data-toggle="tab"><i class="fa fa-table"></i> Room Transaction</a></li>
				  <li><a href="#restaurant-view-placer" data-toggle="tab"><i class="fa fa-bar-chart-o"></i> Restaurant Transaction</a></li>
				</ul>

				<div class="tab-content" style="background-color:#fff;">
          <div class="tab-pane fade in active" id="table-view-placer">
	          <table class="table report-table-list table-bordered" id="data_table">
							<thead>
								<tr>
									<th class="al_center" valign="middle">No</th>
									<th class="al_center" valign="middle">Customer Name</th>
									<th class="al_center" valign="middle">Item</th>
									<th class="al_center" valign="middle">Price</th>
									<th class="al_center" valign="middle">Guest</th>
									<th class="al_center" valign="middle">Quantity</th>
									<th class="al_center" valign="middle">Amount</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table><br>
        		<button class="btn btn-primary pull-right" id="print-out"><i class="fa fa-print"></i> Print Out</button>
          </div>
          <div class="tab-pane fade" id="restaurant-view-placer">
          	<h4>Not ready yet</h4>
          </div>
        </div>
			</fieldset>
		</div>
		<p id="filter-notification" class="alert alert-error">
			No result, please fix your search query...
		</p>
	</div>
</div>

<div class="footer">
</div>

<?php include("/includes/footer.php") ?>   

<script type="text/javascript">

	$(function () {
    $('#tab-view a:first').tab('show');
  })
  
	$(document).ready(function() {
		
		var act = $('#filter-type').val();

		$('#filter-notification').hide();
		$('#result-content').hide();
		$('#print-out').hide();

		$('#datepick').datepicker();

		$('#filter-type').change(function(event) {
			/* Act on the event */
			var that = $(this);
			var optionDate = that.find("option:selected");
			act = that.val();
			$('#datepick').datepicker("remove");
			$('#datepick').val("");
			if (that.val() != '*') {
				$('#check-filter').removeAttr('disabled');
				$('#datepick').removeAttr('disabled');
				$('#datepick').datepicker({
					format: optionDate.data("format"),
					minViewMode: optionDate.data("min-view"),
					autoclose: true
				});
			}else{
				$('#check-filter').attr('disabled', 'disabled');
				$('#datepick').attr('disabled', 'disabled');
			}
		});

		$('#filter-form').submit(function(event) {
			/* Act on the event */
			event.preventDefault();
			$('#filter-notification').hide();
			$('#result-content').hide();
			$('#print-out').hide();
			$('body').modalmanager("loading");
			
			var formReport = {
				date: $('#datepick').val(),
				act: act
			}

			$.ajax({
				url: 'ajax/show_report_customer.php',
				type: 'POST',
				data: formReport,
			})
			.done(function(data) {
				// console.log("success");
				if (data == '') {
					$('#filter-notification').show();
				}else{
					$('#data_table').find('tbody').html(data);
					$('#result-content').show();
					$('#print-out').show();
				};

				$('.currency').autoNumeric('init', {
					aSign: 'IDR ',
					aPad: false
				});

			})
			.fail(function() {
				// console.log("error");
			})
			.always(function() {
				// console.log("complete");
				setTimeout(function(){
					$('body').modalmanager("loading");	
				}, 300);
			});

			$('#print-out').click(function(event) {
				/* Act on the event */
				alert('not ready yet');
			});
			
		});
	});
</script>        